<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">发票详情</view>
		</view>
		<view class="clear_box"></view>

		<view class="list_box">
			<view class="list">
				<view class="title">开票状态</view>
				<view class="text" v-if="info.status==1">开票成功</view>
				<view class="text" v-if="info.status==0">开票中</view>
			</view>
		</view>

		<view class="post_box" v-if="info.status==1">
			<image :src="info.img" mode="widthFix" :data-img="info.img" @tap="openPreviewImage"></image>
		</view>

		<view class="details_box">
			<view class="details_title">发票信息</view>
			<view class="order_list">
				<view class="standing">
					<view class="stand">发票类型：电子普通发票</view>
					<view class="stand">发票内容：系统信息</view>
					<view class="stand">抬头类型：{{info.rise_cn}}</view>
					<view class="stand">抬头名称：{{info.buyer_name}}</view>
					<view class="stand">开票金额：{{info.money}}</view>
					<view class="stand" v-if="info.status==1">开票时间：{{info.updated_at}}</view>
					<view class="stand">申请时间：{{info.created_at}}</view>
				</view>
			</view>
		</view>
		
		<view class="confirm" v-if="info.status==1" @click="downloadFile()">保存发票</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				scrrol: false,
				info: '',
				id:0,
				url:'',
			}
		},
		onLoad(e) {
			let that = this;
			that.id = e.id;
			that.loadData();
		},
		methods: {
			loadData() {
				let that = this;
					that.Net._get('auth/invoice_detail', {id:that.id}, res => {
						if (res.code == 200) {
							that.info = res.data;
							that.url = res.data.img;
						}
					});
			},
			downloadFile() {
				uni.showLoading({
					title: '下载中'
				});
				uni.downloadFile({ //下载
					url: this.url, // 图片下载地址
					success: res => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({ // 保存图片到系统相册。
								filePath: res.tempFilePath, // 图片文件路径
								success: function() {
									uni.showToast({
										title: '保存成功',
										icon: 'none',
									});
								},
								fail: function(e) {
									console.log(e);
									uni.showToast({
										title: '保存失败',
										icon: 'none',
									});
								},
							});
						}
					}
				});
			},
			openPreviewImage(e) {
				let that = this;
				let img_ = e.currentTarget.dataset.img;
				uni.previewImage({
					urls: [img_],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
			var that = this;
			that.page++;
			// that.Net._get('shop_goods', {per_page:'10',page:that.page,}, res => {
			//   if (res.code == 200) {
			//     //console.log(res)
			//     if (res.data.data == '') {
			//       uni.showToast({
			//         title: '已经是最后一页了',
			//         duration: 2000,
			//         icon: 'none'
			//       });
			//     } else {
			//       that.info = that.info.concat(res.data.data); //将数据拼接在一起
			//     }
			//   } else if (res.code == 0) {
			//     that.Msg.Success(res.msg, res => {});
			//   }
			// });
		},
	}
</script>

<style>
	.scrrolHeader {
		background-color: #FF7701 !important;
	}

	.list_box {
		width: 92%;
		margin: 4% auto 0;
		background-color: #fff;
		padding: 0 4%;
		border-radius: 4vw;
	}

	.list_box .list {
		width: 100%;
		height: 14vw;
		display: flex;
		align-items: center;
	}

	.list_box .list .icon {
		width: 6vw;
		margin-right: 3vw;
	}

	.list_box .list .icon image {
		width: 100%;
	}

	.list_box .list .title {
		font-size: 4vw;
		color: #333;
		font-weight: bold;
		margin-right: 3vw;
	}

	.list_box .list .text {
		font-size: 4vw;
		color: #26AC5E;
		font-weight: bold;
		flex: 1;
	}

	.list_box .list .go {
		width: 18vw;
		height: 8vw;
		border-radius: 8vw;
		background-color: #FE8E28;
		font-size: 3.5vw;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.list_box .list .time {
		font-size: 3.5vw;
		color: #FC5D20;
	}

	.list_box .list .arrow {
		font-size: 3.5vw;
		color: #333;
		margin-left: 3vw;
		text-align: right;
	}

	.post_box {
		width: 92%;
		margin: 4% auto 0;
		background-color: #fff;
		padding: 3vw;
		border-radius: 4vw;
	}

	.post_box image {
		width: 100%;
	}

	.details_box {
		width: 92%;
		margin: 4% auto 0;
		background-color: #fff;
		padding: 5vw 4%;
		border-radius: 3vw;
	}

	.details_box .details_title {
		font-size: 4.2vw;
		color: #333;
		font-weight: bold;
		margin-bottom: 5vw;
	}

	.order_list {
		width: 100%;
		margin: 4% auto 0;
		background-color: #fff;
		border-radius: 3vw;
		box-sizing: border-box;
	}

	.order_list .order_text {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.order_list .order_text .order_menu {
		font-size: 3.5vw;
		color: #fff;
		background-color: #FC5D20;
		height: 9vw;
		border-radius: 9vw;
		width: 20vw;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}

	.order_list .order_text .order_menu02 {
		background-color: #FF4246;
	}

	.order_list .order_text .text_box {
		flex: 1;
	}

	.order_list .order_text .text_box .title_box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.order_list .order_text .text_box .title_box .title {
		font-size: 5vw;
		font-weight: bold;
		color: #333;
		margin-right: 3vw;
	}

	.order_list .order_text .text_box .title_box .type {
		height: 5vw;
		padding: 0 1.5vw;
		border-radius: 0.8vw;
		font-size: 3vw;
		letter-spacing: 1px;
		font-weight: bold;
		color: #fff;
		background-color: #5F6488;
		transform: skew(-15deg);
		display: flex;
		align-items: center;
	}

	.order_list .order_text .text_box .text {
		width: 100%;
		font-size: 3.5vw;
		color: #666666;
		margin-top: 2vw;
	}

	.order_list .order_text .order_img {
		width: 28vw;
		margin-left: 3vw;
	}

	.order_list .order_text .order_img image {
		width: 100%;
	}

	.order_list .rule_box {
		font-size: 3.3vw;
		font-weight: bold;
		height: 10vw;
		padding: 0 4%;
		display: flex;
		align-items: center;
		margin-top: 4%;
		border-radius: 2vw;
	}

	.order_list .standing {
		width: 100%;
		padding: 3vw;
		border-radius: 2vw;
		background-color: #F8F8F8;
		margin-top: 4%;
	}

	.order_list .standing .stand {
		color: #666;
		font-size: 3.5vw;
		margin-top: 1vw;
	}

	.order_list .standing .stand:nth-child(1) {
		margin-top: 0;
	}
</style>